<template>
  <div class="orderDetails">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('历史详情')}}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="card_box">
        <div class="product_info">
          <img class="logo" :src="repaymentInfo.productLogo">
          <span class="productName">{{ repaymentInfo.appName }}</span>
          <span class="status"
                >Completed</span>
        </div>
        <div class="card_list">
          <!--        借款订单号-->
          <div class="card_item">
            <span class="title">{{ $t('订单号') }}</span>
            <span class="value">{{ $route.query.loanRecordId }}</span>
          </div>
          <!--        产品名称-->
          <div class="card_item" v-show="repaymentInfo.appName">
            <span class="title">{{ $t('产品名称') }}</span>
            <span class="value">{{ repaymentInfo.appName }}</span>
          </div>
          <!--        借款金额-->
          <div class="card_item" v-show="repaymentInfo.loanAmount">
            <span class="title">{{ $t('借款金额') }}</span>
            <span class="value"><span>₱</span>{{ repaymentInfo.loanAmount }}</span>
          </div>
          <!--        申请日期-->
          <div class="card_item" v-show="repaymentInfo.loanTime">
            <span class="title">{{ $t('申请日期') }}</span>
            <span class="value">{{ $dateFormat(new Date(repaymentInfo.loanTime), 'dd/mm/YYYY HH:MM:SS') }}</span>
          </div>
          <!--        到手金额-->
          <div class="card_item">
            <span class="title">{{ $t('到手金额') }}</span>
            <span class="value"><span>₱</span>{{ repaymentInfo.paymentAmount }}</span>
          </div>
          <!--        借款期限-->
          <div class="card_item">
            <span class="title">{{ $t('借款期限') }}</span>
            <span class="value">{{ repaymentInfo.loanTerm }}</span>
          </div>
          <!--        还款时间-->
          <div class="card_item" v-show="repaymentInfo.lastRepaymentDay">
            <span class="title">{{ $t('还款时间') }}</span>
            <span class="value">{{ $dateFormat(new Date(repaymentInfo.lastRepaymentDay),'dd/mm/YYYY HH:MM:SS') }}</span>
          </div>
          <!--        银行名称-->
          <div class="card_item" v-show="repaymentInfo.bankName">
            <span class="title">{{ $t('银行名称') }}</span>
            <span class="value">{{ repaymentInfo.bankName }}</span>
            <div class="clear_float"></div>
          </div>
          <!--        银行卡号-->
          <div class="card_item" v-show="repaymentInfo.bankNum">
            <span class="title">{{ $t('银行卡号') }}</span>
            <span class="value">{{ repaymentInfo.bankNum }}</span>
            <div class="clear_float"></div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import {onMounted, ref} from 'vue'
import {fetchUserNewLoan, lookOrderDetails} from '@/api/order'
import router from '@/router/index'
import {useStore} from "vuex";
import {formatMoney, processNext,} from "@/utils/tool";
import {userInfoVerify} from "@/api/home";
import {Toast} from "vant";

export default {
  setup() {
    const statusList = ref([])
    const store = useStore()
    const isRollOver = ref(false)
    const isRepayment = ref(false)
    const isOrderSettle = ref(false)
    const isShowOrderBtn = ref(false)
    const {loanRecordId} = router.currentRoute.value.query
    const repaymentInfo = ref({})
    //-1拒绝 -2订单关闭 1提交申请 2审核中 3已通过 4已打款 5待还款 6已结清 7逾期
    const fetchOrderDetails = async () => {
      const res = await lookOrderDetails({loanRecordId})
      if (res.code === 1) {
        repaymentInfo.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    onMounted(() => {
      fetchOrderDetails()

    })
    return {
      isOrderSettle,
      statusList,
      isRollOver,
      isShowOrderBtn,
      isRepayment,
      repaymentInfo
    }
  }
}
</script>

<style scoped lang="less">

.orderDetails {
  overflow: auto;

  .wrapper {
    padding: 15px;
    margin-top: -170px;
  }

  .card_box {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 6px;
    margin-top: 15px;
    padding: 5px 15px;
    .product_info {
      font-size: 16px;
      position: relative;
      background-color: #FFEFE2;
      box-sizing: border-box;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 0;

      .logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
      }

      .productName {
        vertical-align: middle;
        font-size: 20px;
        margin: 0 10px;
      }

      .status {
        color: #18CC4A;
        position: absolute;
        right: 15px;
        top: 50%;
        width: 118px;
        font-size: 20px;
        transform: translateY(-50%);
        text-align: center;
      }
    }
    .step_box {
      font-size: 16px;
      padding: 10px;
    }

    .card_header {
      border-bottom: 1px solid #E6E6E6;
      font-size: 16px;
      color: #666666;
      padding-bottom: 10px;
    }
    .card_item {
      padding: 12px 0;
      font-size: 13px;

      .title {
        color: #999999;
      }

      .value {
        float: right;
        flex: 1;
        color: #333333;
      }
    }
  }

  .time_line {
    overflow-y: auto;
    box-sizing: border-box;
    background-image: url("../../../assets/order/order_box_bg.png");
    background-size: 100% 100%;
    border-radius: 6px;
    padding: 20px 10px;

    .box {
      box-sizing: border-box;
      text-align: center;

      .title {
        font-size: 14px;
        color: #0CD8AD;
        margin-bottom: 5px;

      }

      .content {
        box-sizing: border-box;

        .center {
          color: #505050;
          margin-bottom: 5px;
          font-size: 11px;
          display: flex;
          justify-content: space-between;
          font-weight: 600;
          font-family: Source Han Sans CN;
        }


      }

      .date {
        margin-top: 5px;
        font-size: 10px;
        color: #666666;
      }
    }

    .steps {

    }

    .steps_item {
      background-color: #F0EFF5;
      margin-bottom: 25px;
      padding: 10px;
      border-radius: 10px;
      position: relative;
    }

    .steps_item .img_top {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateY(-50%);
      height: 14px;
      width: 16px;
    }
  }

  .wrapper_button {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
}
</style>
